<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 1px solid darkorange;
        /* background-color: rgb(red, green, blue); */
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    R(红色):<input id="input1" type="range" min="0" max="255" step="1" /><br />
    G(绿色):<input id="input2" type="range" min="0" max="255" step="1" /><br />
    B(蓝色):<input id="input3" type="range" min="0" max="255" step="1" />
  </body>

  <script>
    var div1 = document.querySelector(".box");

    var input1 = document.querySelector("#input1");
    var input2 = document.querySelector("#input2");
    var input3 = document.querySelector("#input3");
    input1.addEventListener("input", color);
    input2.addEventListener("input", color);
    input3.addEventListener("input", color);

    function color() {
      var a = input1.value;
      var b = input2.value;
      var c = input3.value;
      var color = `rgb(${a},${b},${c})`;

      div1.style.backgroundColor = color;
    }
  </script>
</html>
